import React from 'react';
import { cn } from '@/lib/utils';

// 徽章变体类型
type BadgeVariant = 'default' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';

// 徽章尺寸类型
type BadgeSize = 'sm' | 'md' | 'lg';

// 徽章属性接口
interface BadgeProps {
  // 徽章内容
  children: React.ReactNode;
  // 徽章变体样式
  variant?: BadgeVariant;
  // 徽章尺寸
  size?: BadgeSize;
  // 是否为圆形徽章
  rounded?: boolean;
  // CSS类名
  className?: string;
  // 悬浮提示标题
  title?: string;
}

// 变体样式映射
const variantClasses: Record<BadgeVariant, string> = {
  default: 'bg-gray-100 text-gray-800 border-gray-200',
  secondary: 'bg-gray-50 text-gray-600 border-gray-100',
  success: 'bg-green-100 text-green-800 border-green-200',
  warning: 'bg-yellow-100 text-yellow-800 border-yellow-200',
  danger: 'bg-red-100 text-red-800 border-red-200',
  info: 'bg-blue-100 text-blue-800 border-blue-200',
};

// 尺寸样式映射
const sizeClasses: Record<BadgeSize, string> = {
  sm: 'px-2 py-0.5 text-xs',
  md: 'px-2.5 py-1 text-xs',
  lg: 'px-3 py-1.5 text-sm',
};

/**
 * 徽章组件
 * 用于显示状态、标签、数量等信息，支持多种样式和尺寸
 * 
 * @example
 * // 基础用法
 * &lt;Badge&gt;5 collections&lt;/Badge&gt;
 * 
 * // 不同变体和尺寸
 * &lt;Badge variant="success" size="lg"&gt;已完成&lt;/Badge&gt;
 * 
 * // 圆形徽章
 * &lt;Badge variant="danger" rounded&gt;99+&lt;/Badge&gt;
 */
export const Badge: React.FC<BadgeProps> = ({
  children,
  variant = 'default',
  size = 'md',
  rounded = false,
  className,
  title,
}) => {
  return (
    // 徽章容器：内联块、边框、居中文本
    <span
      className={cn(
        // 基础样式：内联块、字体粗细、边框、禁止换行
        'inline-flex items-center font-medium border whitespace-nowrap',
        // 变体样式
        variantClasses[variant],
        // 尺寸样式
        sizeClasses[size],
        // 圆角样式
        rounded ? 'rounded-full' : 'rounded-md',
        // 自定义样式
        className
      )}
      title={title}
    >
      {children}
    </span>
  );
};